<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>科普中国视频网</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <style type="text/css">
    .movies-content{
    height:580px;
    width:1200px;
    }
    </style>
</head>

<body>

<!--site-nav start, 这里使用清除浮动的方式让这个盒子具有高度-->
<div class="site-nav clearfix">
    <div class="w">
        <div class="site-nav-logo">
            <a href="#" class="logo"><img src="https://img3.kepuchina.cn/images/2018/logo.png" alt=""></a>
        </div>
        <div class="site-nav-search">
            
                <input type="text" placeholder="请输入视频名称" id="searchwords">
                <button type="submit" id="search">搜索</button>
        
        </div>
        <div class="site-nav-r">
            <ul>
                <li><a href="index.html">首页</a></li>
			<c:if test="${sessionScope.userName==null}">
                <li><a href="userlogin.html">会员充值</a></li> 
          	</c:if>
         <c:if test="${sessionScope.userName!=null}">
             <li><a href="index.jsp" }>会员充值</a></li> 
          </c:if>
                
      	<c:if test="${sessionScope.userName==null}">
                <li><a href="userlogin.html">登录/注册</a></li>
          </c:if>
          <c:if test="${sessionScope.userName!=null}">
       <li><a href="user">个人中心</a></li>
          </c:if>
               
            </ul>
        </div>
    </div>
</div>
<!--site-nav end-->

<!--main start-->
<div class="main">
    <div class="w">
        <div class="main-slider">
            <ul>
                <li class="first"></li>
                <li class="current"><a href="#"><span class="current-title">我爱科技论坛</span><span class="current-content">VIP视频免费看！</span></a>
                </li>
                <li><a href="play.html"><span>我爱科技论坛</span><span>VIP视频免费看！</span></a></li>
                <li><a href="play.html"><span>我爱科技论坛</span><span>VIP视频免费看！</span></a></li>
                <li><a href="play.html"><span>我爱科技论坛</span><span>VIP视频免费看！</span></a></li>
                <li><a href="play.html"><span>我爱科技论坛</span><span>VIP视频免费看！</span></a></li>
                <li><a href="play.html"><span>我爱科技论坛</span><span>VIP视频免费看！</span></a></li>
                <li><a href="play.html"><span>我爱科技论坛</span><span>VIP视频免费看！</span></a></li>
                <li><a href="play.html"><span>我爱科技论坛</span><span>VIP视频免费看！</span></a></li>
                <li class="last"></li>
            </ul>
            <!--这是一个空盒子-->
            <a href="javascript:void(0);" class="arrow-l"><</a>
            <a href="javascript:void(0);" class="arrow-r">></a>
        </div>
    </div>
</div>
<!--main end-->

<!--movies start-->
<div class="movies clearfix">
    <div class="w">
        <!--电影类型-->
        <div class="movies-type">
            <h1>视频分类</h1>
            <ul>
                <li class="sel">全部</li>
                <li>文化</li>
                <li>地理</li>
                <li>历史</li>
                <li>农业</li>
                <li>军事</li>
                <li>健康</li>
                <li>经济</li>
                <li>科技</li>
                <li>其他</li>
            </ul>
        </div>
        <!--电影节目-->
        <div class="movies-content">
            <ul>
                <li>
                    <a href="play.html">
                    <div class="movies-img" href="#"><img src="http://www.kepuchina.cn/wiki/faq/201910/W020191025394013229396.jpg"
                            alt=""></div>
                    <div class="movies-info">
                        <span class="movie-name">你还在以为牙龈出血是件小事吗</span><br>
                        <span class="movie-type">类型：<span>其他</span></span><br>
                        <span class="movie-date">发布时间：<span>2019-8-20</span></span>
                    </div>
                                </a>
                </li>
            </ul>
        </div>
        <!--电影分页-->
        <!-- <div class="movies-page">
            <div class="w">
                <ul>
                    <li><a class="page-btn" href="#">首页</a></li>
                    <li><a class="page-btn" href="#">上一页</a></li>
                    <li><a class="page-btn" href="#">1&nbsp;/&nbsp;10</a></li>
                    <li><a class="page-btn" href="#">下一页</a></li>
                    <li><a class="page-btn" href="#">尾页</a></li>
                </ul>
            </div>

        </div> -->
        <!-- layui分页 -->
        <div id="demo2-1" style="text-align: center"></div>
    </div>
  
</div>
<!--movies end-->

<!--footer start-->
<div class="footer clearfix">
    <div class="w">
        <div class="footer-links">
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">关于我们</a></dt>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">网站地图</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">投稿须知</a></dd>
            </dl>
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">联系我们</a></dt>
                <dd><a href="#">邮箱</a></dd>
                <dd><a href="#">微博</a></dd>
                <dd><a href="#">QQ群</a></dd>
                <dd><a href="#">微信</a></dd>
            </dl>
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">网站服务</a></dt>
                <dd><a href="#">创业报道</a></dd>
                <dd><a href="#">广告支持</a></dd>
                <dd><a href="#">网站推广</a></dd>
                <dd><a href="#">商务合作</a></dd>
            </dl>
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">帮助中心</a></dt>
                <dd><a href="#">登陆注册</a></dd>
                <dd><a href="#">找回密码</a></dd>
                <dd><a href="#">自助服务</a></dd>
                <dd><a href="#">资源下载</a></dd>
            </dl>
            <dl class="last" id="lastlogo">
                <dt><a href="#">关注我们</a></dt>
                <dd><a href="#">微信</a></dd>
                <dd><a href="#">QQ群</a></dd>
                <dd><a href="#">新浪</a></dd>
                <dd><a href="#">邮箱</a></dd>
                <div class="img-show" id="imgshow">
                    <img src="images/weixin.jpg" alt="">
                </div>
            </dl>

        </div>
    </div>
</div>
<!--footer end-->
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> -->
 <!--<script src="js/xframe-min-1.0.js" type="text/javascript"></script>--> 
<script src="js/base.js" type="text/javascript"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript"></script>


<script>
    //首页轮播图效果开始------------------------------------------------------------------------------------------
    /**
     * 使用面向对象的方式封装这个轮播图效果
     */
    function imgShow() {
    }

    /**
     * 首页的电影效果轮播图效果实现
     * @type {{imgs: Array, num: number, currentNumber: number, elements: null, start: imgShow.start, init: imgShow.init, initParas: imgShow.initParas, initEvent: imgShow.initEvent, itemMove: imgShow.itemMove, mouseover: imgShow.mouseover, click: imgShow.click, autoPlay: imgShow.autoPlay}}
     */
    imgShow.prototype = {
        imgs : [],         // 图片数组
        num : -1,           // 初始的图片下标
        currentNumber : 0,     // 当前展示的图片下表编号
        elements : null,        // 存储获取的DOM元素

        /**
         * 输入图片路径信息之后， 开启轮播图效果
         * @param imgs
         */
        start : function (imgs) {
            this.init(imgs);
        },
        /**
         * 输入参数初始化
         * 事件处理模块初始化
         * @param imgs
         */
        init : function (imgs) {
            // 初始化输入参数
            this.initParas(imgs);
            // 主程序入口
            this.autoPlay();
            // 事件初始化
            this.initEvent();
        },
        /**
         * 输入参数初始化
         * @param imgs
         */
        initParas : function (imgs) {
            this.imgs = imgs;
            this.elements = $('.main-slider ul li');
            // 初始化图片背景
            $('.main-slider').css('background', 'url(' + this.imgs[0] + ')').css('background-size', '100%');
            // IE  兼容
            $('.main-slider').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(' + 'src=' + this.imgs[0] + ',sizingMethod="scale")');
        },
        /**
         * 事件处理初始化
         */
        initEvent : function () {
            this.mouseover();
            this.click();
        },
        /**
         * 自动移动项的实现（图片随项一起移动）
         * @param index
         */
        itemMove : function (index) {
            // 移动之后，找到相应的li-item，改变他的样式
            var lis = $('.main-slider ul li');
            lis.each(function () {
                var a = this.childNodes[0];
                if (this.className === 'current') {
                    this.className = '';
                    a.childNodes[0].className = '';
                    a.childNodes[1].className = '';
                }
            });

            // 把当前的设置为样式 index = 0, 则切换为第0个li标签
            var current = lis[index+1];
            current.className = 'current';
            current.childNodes[0].childNodes[0].className = 'current-title';
            current.childNodes[0].childNodes[1].className = 'current-content';
        },
        /**
         * 鼠标移动事件处理模块
         */
        mouseover : function () {
            // 获取所有的li标签
            var lis = this.elements;
            var self = this;
            lis.on('mouseover', function () {
                if (this.className === 'first' || this.className === 'last'){
                    return;
                }
                lis.each(function () {
                    var a = this.childNodes[0];
                    if (this.className === 'current') {
                        this.className = '';
                        a.childNodes[0].className = '';
                        a.childNodes[1].className = '';
                    }
                });
                // 把当前的设置为样式
                var current = this.childNodes[0];
                this.className = 'current';
                current.childNodes[0].className = 'current-title';
                current.childNodes[1].className = 'current-content';
                //  原始的实现可以通过父节点的所有孩子节点变遍历的方式来判断，srcNode.parentNode.childNodes[index] === srcNode
                // console.log($(this).index())
                // 设置完毕之后， 修改与之相对应的图片样式信息
                $('.main-slider').css('background', 'url(' + self.imgs[$(this).index()-1] + ')').css('background-size', '100%');
            });
        },
        /**
         * 鼠标单击事件处理模块
         */
        click : function () {
            var self = this;
            $('.arrow-l').on('click', function () {
                self.currentNumber--;
                if (self.currentNumber<0){
                    self.currentNumber = self.imgs.length-1;
                }
                $('.main-slider').css('background', 'url(' + self.imgs[self.currentNumber] + ')').css('background-size', '100%');

                // 设置为自动移动标签项
                self.itemMove(self.currentNumber);
                self.num = self.currentNumber;
            });

            $('.arrow-r').on('click', function () {
                self.currentNumber++;
                if (self.currentNumber > self.imgs.length-1){
                    self.currentNumber = 0;
                }
                $('.main-slider').css('background', 'url(' + self.imgs[self.currentNumber] + ')').css('background-size', '100%');

                // 设置为自动移动
                self.itemMove(self.currentNumber);
                self.num = self.currentNumber;
            });

        },
        /***
         * 轮播图自动播放的实现
         */
        autoPlay : function () {
            var self = this;
            setInterval(function () {
                self.num++;
                $('.main-slider').css('background', 'url(' + self.imgs[self.num % 8] + ')').css('background-size', '100%');
                self.currentNumber = self.num % 8;

                // 开始移动item项
                self.itemMove(self.currentNumber);
            }, 4000);
        },
    }


    /**
     * 轮播图效果的启动
     * @param ev
     */
    window.onload = function () {
        // 图片数组初始化
        var imgs = [
            'images/big0.jpg',
            'images/big1.jpg',
            'images/big2.jpg',
            'images/big3.jpg',
            'images/big4.jpg',
            'images/big5.jpg',
            'images/big6.jpg',
            'images/big7.jpg',
        ];

        // 初始化参数，启动轮播图效果
        var run = new imgShow(imgs);
        run.start(imgs);

        // 启动切换菜单
        // toggleMovieButton();

        // 底部菜单
//         toggleLogo();
    }

   
</script>
<script>

</script>
<script type="text/javascript">

var videotype="";
//var tot;
//封装ajax方法
function ajaxType(page,videotype){
	 $('.movies-content>ul').html("")
	$.ajax({
		   type: "get",
		   url:"home",
		   data:"page="+page+"&videotype="+videotype,
		   success: function(data){
		    // console.log(data)
		    if(data==""){
		    	console.log(11)
		    	$('.movies-content>ul').html("暂无视频")
		    }
		     $.each(data,function(i,v){
		    	 //console.log(v)
		    	 $('.movies-content>ul').append("<li><div class='movies-img' href='#'><img src='"+v.videoCover+"' alt=''></div><div class='movies-info'><span class='movie-name'>"+v.videoName+"</span><br><span class='movie-type'>类型：<span>"+v.videoType+"</span></span><br><span class='movie-date'>发布时间：<span>"+v.videoTime+"</span></span></div></li>")
		     })
		   }
		});
	 

	 
}

$(function(){
	ajaxType(1,"");
 })

</script>
<script type="text/javascript">
$('.movies-type ul li').on("click",function(){
	var index= $(this).index()
	// console.log($('.movies-type ul li').eq(index))
	// $(this).addClass("sel").siblings().removeClass('sel')
	$('.movies-type ul li').eq(index).addClass('sel').siblings().removeClass('sel')
		videotype=$(this).text()
		
		 console.log(videotype);
	  	
	     tot=${sessionScope.pageInfoTotal};
	     console.log(tot);
	     if(videotype=="全部"){
	    	 videotype=""
	    	 ajaxType(1,"");
	     }
	     else{
	    	 ajaxType(1,videotype);
	     }
	     
//	 	 if(videotype=="全部"){
//	 		 ajaxType(1,"")
//	 	 }
//	 	 else{
			 
//	 	 }
		
	})
	
//layui分页
layui.use('laypage', function(){
	  var laypage = layui.laypage;
	  laypage.render({
	    elem: 'demo2-1'
	    ,count:${sessionScope.pageInfoTotal}
	    ,limit:8
	    ,curr:1 //当前页
	    ,theme: '#FF5722'
	    ,jump: function(obj,first){
	    		    //obj包含了当前分页的所有参数，比如：
	    		    console.log(obj.curr);  //得到当前页，以便向服务端请求对应页的数据。
	    		    console.log(obj.limit); //得到每页显示的条数
	    		    //首次不执行
	    		    if(!first){
	    		      //do something	
	     		   ajaxType(obj.curr,videotype)
	    		   
	    		      
	    		    }
	    		  }
	  });
 
	});

	
	</script>
	
	<script type="text/javascript">
	  //点击视频
	 $('.movies-content>ul').on('click','li',function(){
		 var index=$(this).index()
		 var videoname=$('.movies-content>ul li .movie-name').eq(index).text()
		 console.log(videoname)
		 //window.location.href="WEB-INF/jsp/play.jsp"
		  	// window.location.href="videoplay"
// 				$.ajax({
// 					type:"get",
// 					url:"videoplay",
// 					data:"videoName=中国战斗机的发展&videoNumber=1",
// 					success:function(){
// 					}
// 				})

			window.location.href="videoplay?videoName="+videoname+"&videoNumber=1"
	 })
		$("#search").click(function(){
			console.log($("#searchwords").val())
			 $('.movies-content>ul').html("")
			$.ajax({
				
				   type: "get",
				   url:"search",
				   data:"page=1&searchLike="+$("#searchwords").val(),
				   success: function(data){
					   if(data==""){
						   $('.movies-content>ul').html("查询无结果")
						   
					   }
				    // console.log(data)
				     $.each(data,function(i,v){
				    	 //console.log(v)
				    	 $('.movies-content>ul').append("<li><div class='movies-img' href='#'><img src='"+v.videoCover+"' alt=''></div><div class='movies-info'><span class='movie-name'>"+v.videoName+"</span><br><span class='movie-type'>类型：<span>"+v.videoType+"</span></span><br><span class='movie-date'>发布时间：<span>"+v.videoTime+"</span></span></div></li>")
				     })
				   }
				});
		})
		
		$(function(){
		})
	</script>
</body>
</html>